完成了側邊選單與 SPA 頁面切換骨架後，接下來我們先來製作 常見 QA 區域。這裡要使用的元件是 Bootstrap 5 的 Accordion（手風琴）。

相信大家對於這個元件並不陌生，在許多網站的 FAQ 頁面中經常能看到它的身影，非常適合用來收納大量的問答內容。

1.認識 Accordion 元件結構

Bootstrap 的 Accordion 主要由外層的 .accordion 容器與多個 .accordion-item 組成。每一個 .accordion-item 內部又分為 標題（Header） 與 內容（Body）：

• .accordion-header：手風琴的標題區塊，裡面包含觸發展開/收合的 <button>。

• .accordion-body：展開後顯示的詳細解答內容。

官方基礎範例程式碼如下：

<div class="accordion" id="accordionExample">
  <!-- 第一項 QA -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div class="accordion-body">
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element.
      </div>
    </div>
  </div>

  <!-- 第二項 QA -->
  <div class="accordion-item">
    ...
  </div>

  <!-- 第三項 QA -->
  <div class="accordion-item">
    ...
  </div>
</div>

留意點：在修改或新增項目時，務必確保按鈕上的 data-bs-target="#id" 與內容容器的 id="..." 完全對應一致，否則點擊時會展開錯誤的區塊或完全無反應。

Always Open 🎶 (差點接著唱了) 模式

預設情況下，展開某一項 QA 時，其他已展開的項目會自動收合（因為有設定 data-bs-parent="#accordionExample"）。

如果希望使用者點擊新選項時，原本展開的內容不會自動關閉，只要移除子項目的 data-bs-parent 屬性即可（可參考官方文件中的 Always open 範例）。

(參考資料：Bootstrap 5 components-Accordion)

2. 整合進常見 QA tab-pane

我們將複製好的 Accordion 程式碼貼入上一篇寫好的常見 QA .tab-pane 容器中。
當點擊左側選單的「常見 QA」按鈕時，右邊就會順利呈現手風琴內容了！

因為官方範例預設第一個項目是展開狀態（帶有 .show 與未帶 .collapsed），但我希望初始狀態全部都是預設收合，使用者有需要再點擊展開即可，因此需要手動調整第一個項目：

1. 將第一個按鈕的 class 加上 .collapsed。

2. 將第一個內容區容器的 class 拿掉 .show。

再將文字與問答替換成設計稿內容後，常見 QA 區塊就完成了。

套用 Shadows 通用類別

為了讓畫面看起來不那麼平淡，我打算為左側的 List Group 與右側的 Accordion 加上一點微微的陰影，提升介面的視覺層次感。

Bootstrap 5 提供了非常方便的 Shadows Utilities 通用類別，主要分為三種尺寸：

• .shadow-sm：小陰影（適合卡片、按鈕或微小元素）

• .shadow：標準預設陰影

• .shadow-lg：大陰影（適合 Modal 彈窗或懸浮提示）

只要在元件最外層的 class 中加入 shadow-sm 即可輕鬆完成套用：

套用後的效果

(參考資料：Bootstrap 5 utilities-shadows)

小結

通過套用bootstrap的手風琴元件，再稍微更改一些設定來符合我們的設計稿，就可以快速地完成這一個功能頁面，往下一頁前進了。